<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
        }
        #menu
        {
            position: absolute;
            width: 100%;
            bottom: 0;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function()
        {
            var oMenu = document.getElementById("menu");
            var aImg = oMenu.getElementsByTagName("img");

            // 存储图片的初始宽度
            var aWidth = [];
            for(let i = 0; i < aImg.length; i++)
            {
                aWidth.push(aImg[i].offsetWidth);
                aImg[i].style.width = parseInt(aImg[i].offsetWidth / 2) + "px";
            }

            // 鼠标移动事件
            document.onmousemove = function (event)
            {
                var event = event || window.event;
                for (let i = 0; i < aImg.length; i++)
                {
                    // 没理解这些参数是为了什么
                    var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
                    var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;

                    var iScale = 1 - Math.sqrt(a * a + b * b) / 300;

                    if (iScale < 0.5) iScale = 0.5;

                    
                    aImg[i].style.width = aWidth[i] * iScale + "px";
                }
            }
        }
    </script>
</head>
<body>
    <div id="menu">
        <img src="image/1.png" alt="#">
        <img src="image/2.png" alt="#">
        <img src="image/3.png" alt="#">
        <img src="image/4.png" alt="#">
        <img src="image/5.png" alt="#">
        <img src="image/6.png" alt="#">
        <img src="image/7.png" alt="#">
        <img src="image/8.png" alt="#">
    </div>
</body>
</html>